<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>比赛中心</title>
  <link rel="stylesheet" href="./CSS/race.css">
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  <script src="./jq函数库/JQ.js"></script>

  <style>
    .loginOrEx{
      cursor: pointer;
      display: inline-block;
      width: 37px;
      height: 25px;
      background-color: red;

      text-align: center;
      line-height: 25px;

      background-color: skyblue;
      color: white;
      font-weight: bold;

      margin-left: 20px;
      border-radius: 5px;
    }

    .loginExit{
      background-color: red;

    }
  </style>
</head>

<body>
  <div id="app">

    <div class="zhanwei"></div>
    <div class="headbox">
      <div class="contain">
        <div class="logoBox">
          <div class="logoimage">
            <img src="./image/logo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="logoText">
            <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
          </div>
        </div>

        <div class="directionBox">

          <ul>
            <li>
              <div id="index">首页</div>
            </li>
            <li>
              <div id="raceIndex">比赛中心</div>
            </li>
            <li>
              <div id="courseIndex">课程中心</div>
            </li>
            <li>
              <div id="userIndex">个人中心</div>
            </li>
          </ul>
        </div>
        <div class="userBox">
          <div class="userImage">
            <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
          </div>
          <div class="userName">
            {{userMsg.username}}

            <div class="loginOrEx" v-if="userMsg.username=='未登录'" @click="tologin">登录</div>
            <div class="loginOrEx loginExit" v-else @click ="exitLogin">退出</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->

        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./image/raceBannar1.png" alt="..." style="width: 100%;height: 350px;">
          </div>
          <div class="item">
            <img src="./image/raceBannar2.png" alt="..." style="width: 100%;height: 350px;">
          </div>
          <div class="item">
            <img src="./image/raceBanner3.png" alt="..." style="width: 100%;height: 350px;">
          </div>
          <div class="item">
            <img src="./image/raceBanner4.png" alt="..." style="width: 100%;height: 350px;">
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

    <!-- 主体 -->
    <div class="contain2">

      <div class="left1">
        <div class="search">
          <div class="searchbox">
            <div class="input">
              <input type="text" style="width: 100%;height: 100%;padding-left: 20px;color: silver;"
                placeholder="输入比赛名称" v-model="searchraceName">
            </div>
            <div class="subMit" @click="selectByraceName">搜索</div>
          </div>
          <div class="count">当前第{{nowPage}}页,共{{to}}页</div>
        </div>


        <div class="raceList">
          <div class="raceItem" v-for="(item,i) in raceList" :key="i">
            <div class="ItemMsg">
              <p> <span class="raceTi" style="width: 66px;">正在报名</span> <span
                  style="font-size: 20px;font-weight: bold;   color: rgb(116, 115, 115);"
                  class="msg">{{item.race.rname}}</span></p>
              <div style="display: flex;">
                <p class="raceTi"></p>
                <p style="display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; width: 487px;" class="msg">
                  {{item.race.desc}}
</p>
              </div>

              <p> <span class="raceTi">主办方</span><span class="msg">{{item.company.cname}}</span></p>
              <p> <span class="raceTi">赛季级别</span><span class="msg">全国性</span>
              </p>
            </div>
            <div class="sbmit">
              <div class="baomingBox" @click="baoming(item.race.rid)">立刻报名</div>
              <p class="sss">时间有限 火速报名</p>
              <p class="sss">比赛详情 ></p>
            </div>
          </div>
        </div>

        <!-- 更改页数 -->
        <div class="changePage">
          <div class="pageBox">
            <div class="itembox" @click="recedeArrow(nowPage-1,nowIndex-1)">←</div>
            <div class="itembox pageItem" v-for="(item,i) in pageList" :data-index="i" :class="{'active':item==nowPage}"
              @click="changeNowPage(item,i)">
              {{item}}</div>
            <div class="itembox" @click="proceedArrow(nowPage+1,nowIndex+1)">→</div>
          </div>
        </div>
      </div>
      <div class="right1">
        <div class="topListBox">
          <div class="topItem toptitle"><span style="color: black;">热门竞赛</span> <span style="color: red;">TOP10</span>

          </div>
          <div class="topItem orderNumber" v-for="(item,i) in topRace">
            <span style="display: inline-block; width: 20px;">{{i+1}}</span>
            <a class="raceName2">2022年第一届国际大学生英语作文挑战赛（IEECCS）</a>
          </div>
        </div>

        <div class="topListBox">
          <div class="topItem toptitle"><span style="color: black;">最新竞赛</span> <span style="color: red;">TOP10</span>

          </div>
          <div class="topItem orderNumber" v-for="(item,i) in topRace">
            <span style="display: inline-block; width: 20px;">{{i+1}}</span>
            <a class="raceName2">2022年第一届国际大学生英语作文挑战赛（IEECCS）</a>
          </div>
        </div>
      </div>
    </div>


    <!-- 尾部 -->
    <div class="pic"></div>
    <div class="footer"></div>

  </div>




  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <script src="./JS/common.js"></script>
  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>



  <script>

    // vue代码部分
    const vm = new Vue({


      el: "#app",
      created(){

        if(JSON.parse(sessionStorage.getItem("user"))!=null){
          this.userMsg =JSON.parse(sessionStorage.getItem("user"))
        }
        axios({
          method: 'post',
          url: '/Indenture/raceList',
          data:{
            pageIndex:1
          }
        }).then((res) => {
          console.log(res.data)
          //
          this.raceList = res.data.racesMsg
          //
          this.to = res.data.pageCount

          if(res.data.pageCount>=8){
            this.pageList = [1, 2, 3, 4, 5, 6, 7, 8]
          }
          else {
            for (let i = 0; i <res.data.pageCount ; i++) {
              this.pageList.push(i+1)
            }
          }
        })
      },
      data: {
        raceList: [],
        pageList: [],

        topRace: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        nowIndex: 0,
        nowPage: 1,
        to: 0,

        searchraceName:'',
        userMsg:{username:'未登录',uurl:'./image/userNologin.png'}
      },
      methods: {
        exitLogin(){
          sessionStorage.removeItem("user")

          this.userMsg = {username:'未登录',uurl:'./image/userNologin.png'}
        },
        tologin(){
          location.href = "./login.html"
        },
        selectByraceName(){
          console.log(this.searchraceName)
          if(this.searchraceName!=''){
            this.nowIndex=0;
            this.nowPage=1;

            axios({
              method: 'post',
              url: '/Indenture/raceListByName',
              data:{
                partName:this.searchraceName,
                pageIndex:1
              }
            }).then((res) => {

              console.log(res.data)

              this.raceList = res.data.racesMsg

              this.to = res.data.pageCount

              if(res.data.pageCount>=8){
                this.pageList = [1, 2, 3, 4, 5, 6, 7, 8]
              }
              else {
                this.pageList = []
                for (let i = 0; i <res.data.pageCount ; i++) {
                  this.pageList.push(i+1)
                }
              }
            })
          }

        },

        getRaceList(pageIndex,isSearch){

          if(isSearch){
            axios({
              method: 'post',
              url: '/Indenture/raceListByName',
              data:{
                pageIndex:pageIndex,
                partName:this.searchraceName
              }
            }).then((res) => {
              console.log(res.data)
              this.raceList = res.data.racesMsg
            })
          }
          else {
            axios({
              method: 'post',
              url: '/Indenture/raceList',
              data:{
                pageIndex:pageIndex
              }
            }).then((res) => {
              console.log(res.data)
              this.raceList = res.data.racesMsg
            })
          }
        },

        baoming(id) {
          const userMsg = sessionStorage.getItem("user")
          console.log(userMsg)
          console.log(id)

          if(JSON.parse(sessionStorage.getItem("user"))==null){
            alert("检测到你还没登录请先登录")
            location.href="./login.html"
          }
          else {
            location.href = './application.html?raceid='+id
          }
        },
        changeNowPage(pageNum, indexNum) {
          const numberPian = indexNum - 4;

          if (indexNum >= 4) {
            this.proceed(pageNum, indexNum, numberPian);
          }
          if (indexNum <= 3) {
            this.recede(pageNum, indexNum);
          }
          // 获取最新页数
          this.nowPage = pageNum

          // 发起请求

          if(this.searchraceName==''){
            this.getRaceList(this.nowPage,false)
          }
          else {
            this.getRaceList(this.nowPage,true)
          }

        },
        // 页面前进函数
        proceed(pageNum, indexNum, numberPian) {
          this.nowIndex = indexNum
          if (this.pageList[7] < this.to && pageNum > this.nowPage) {
            if (indexNum >= 4) {
              this.pageList.forEach((item, i) => {
                this.$set(this.pageList, i, item + numberPian)
              })
              this.nowIndex = 4
              if (this.pageList[7] > this.to) {
                var num = this.pageList[7] - this.to
                this.pageList.forEach((item, i) => {
                  this.$set(this.pageList, i, item - num)
                })
                this.nowIndex = indexNum
              }
            }
          }

          console.log(this.nowPage)
        },

        // 后退函数
        recede(pageNum, indexNum) {
          this.nowIndex = indexNum
          if (this.pageList[0] > 1 && pageNum < this.nowPage) {
            if (indexNum <= 3) {
              this.pageList.forEach((item, i) => {
                this.$set(this.pageList, i, item - (4 - indexNum))
              })
              this.nowIndex = 4
              if (this.pageList[0] <= 0) {
                var num = 1 - this.pageList[0]
                this.pageList.forEach((item, i) => {
                  this.$set(this.pageList, i, item + num)
                })
                this.nowIndex = indexNum
              }

            }
          }
          console.log(this.nowPage)
        },
        // 前进箭头
        proceedArrow(pageNum, indexNum) {
          if (pageNum <= this.to && indexNum <= this.pageList.length - 1) {
            this.changeNowPage(pageNum, indexNum)
          }
        },
        // 后退箭头
        recedeArrow(pageNum, indexNum) {
          if (pageNum >= 1 && indexNum >= 0) {
            this.changeNowPage(pageNum, indexNum)
          }
        }
      }
    })


    // dom区域
    var headbox = document.querySelector(".headbox");
    var disrectionLi = document.querySelectorAll(".directionBox li")
    var raceIndex = document.querySelector("#raceIndex");
    raceIndex.addEventListener("click", () => {
      window.location.href = "./race.html"
    })
    var index = document.querySelector("#index");
    index.addEventListener("click", () => {
      window.location.href = "./index.html"
    })
    const courseIndex = document.querySelector("#courseIndex")
    courseIndex.addEventListener("click",()=>{
      window.location.href = "./curriculum.html"
    })

    const userIndex = document.querySelector("#userIndex")
    userIndex.addEventListener("click",()=>{
      window.location.href = "./userIndex.html"
    })
  </script>
</body>

</html>